import Vue from 'vue'
import VueRouter from 'vue-router'
import Order from '../views/Order'
import About from '../views/About'
import ItemCreate from '../views/ItemCreate';
import ItemList from "../views/ItemList";
import ItemUpdate from "../views/ItemUpdate";
import Login from "../views/Login";
import Layout from "../views/Layout";
import Main from "../views/Main";
import OrderList from "../views/OrderList";
import OrderDetails from "../views/OrderDetails";
import OrderStatistic from "../views/OrderStatistic";


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    redirect: {
      name: 'Order'
    },
    children: [
      {
        path: '/home',
        name: 'Order',
        component: Order,
      },
      {
        path: '/main',
        name: 'Main',
        component: Main,
        redirect: {
          name: 'ItemList'
        },
        meta: {
          title: "我的工作台",
          showInbreadcrumb: true
        },
        children: [
          {
            path: '/item/list',
            name: 'ItemList',
            component: {render: h => h('router-view')},
            redirect: {name: 'ItemListSelf'},
            meta: {
              title: "商品列表",
              showInbreadcrumb: true
            },
            children: [
              {
                path: '/item/list',
                name: 'ItemListSelf',
                component: ItemList,
                meta: {
                  title: "商品列表",
                  showInbreadcrumb: false
                }
              },
              {
                path: '/item/update',
                name: 'ItemUpdate',
                component: ItemUpdate,
                meta: {
                  title: "商品修改",
                  showInbreadcrumb: true
                }
              },
              {
                path: '/item/create',
                name: 'ItemCreate',
                component: ItemCreate,
                meta: {
                  title: "商品添加",
                  showInbreadcrumb: true
                }
              }
            ]
          },
          {
            path: '/order/list',
            name: 'OrderList',
            component: {render: h => h('router-view')},
            redirect: {name: 'OrderListSelf'},
            meta: {
              title: "订单列表",
              showInbreadcrumb: true
            },
            children: [
              {
                path: '/order/list',
                name: 'OrderListSelf',
                component: OrderList,
                meta: {
                  title: "订单列表",
                  showInbreadcrumb: false
                }
              },
              {
                path: '/order/details',
                name: 'OrderDetails',
                component: OrderDetails,
                meta: {
                  title: "订单详细",
                  showInbreadcrumb: true
                }
              },

            ]
          },
        ]
      },
      {
        path: '/orderstatistic',
        name: 'OrderStatistic',
        component: OrderStatistic
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  }

]


const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

router.beforeEach(async (to, from, next) => {
  const TOKEN = localStorage.getItem('token');
  if (!TOKEN && to.name !== 'Login') {
    next({name: 'Login', replace: true})
    return
  }
  next()
})

export default router
